<style>
    .pictrueBox {
        display: inline-block !important;
    }

    .pictrue {
        width: 60px;
        height: 60px;
        border: 1px dotted rgba(0, 0, 0, 0.1);
        margin-right: 15px;
        display: inline-block;
        position: relative;
        cursor: pointer;
    }

    .pictrue img {
        width: 100%;
        height: 100%;
    }

    .upLoad {
        width: 58px;
        height: 58px;
        line-height: 58px;
        border: 1px dotted rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.02);
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .rulesBox {
        display: flex;
        flex-wrap: wrap;
        margin-left: 10px;
    }

    .layui-tab-content {
        margin-top: 15px;
    }

    .ml110 {
        margin: 18px 0 4px 110px;
    }

    .rules {
        display: flex;
    }

    .rules-btn-sm {
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        width: 109px;
    }

    .rules-btn-sm input {
        width: 79% !important;
        height: 84% !important;
        padding: 0 10px;
    }

    .ml10 {
        margin-left: 10px !important;
    }

    .ml40 {
        margin-left: 40px !important;
    }

    .closes {
        position: absolute;
        left: 86%;
        top: -18%;
    }

    .red {
        color: red;
    }

    .layui-input-block .layui-video-box {
        width: 22%;
        height: 180px;
        border-radius: 10px;
        background-color: #707070;
        margin-top: 10px;
        position: relative;
        overflow: hidden;
    }

    .layui-input-block .layui-video-box i {
        color: #fff;
        line-height: 180px;
        margin: 0 auto;
        width: 50px;
        height: 50px;
        display: inherit;
        font-size: 50px;
    }

    .layui-input-block .layui-video-box .mark {
        position: absolute;
        width: 100%;
        height: 30px;
        top: 0;
        background-color: rgba(0, 0, 0, .5);
        text-align: center;
    }

    .clearFix:after {
        content: '';
        display: block;
        clear: both;
    }
</style>
<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form">
        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-block">
                <input type="text" name="goods_name"  class="layui-input" lay-verify="required" placeholder="请输入商品名称" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品简介</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea" name="goods_desc"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">商品logo</label>
            <div class="layui-input-block layuimini-upload">
                <input name="image"  class="layui-input layui-col-xs6" lay-verify="required"  placeholder="请上传商品logo" value="{$row.image|default=''}">
                <div class="layuimini-upload-btn">
                    <span><a class="layui-btn" data-upload="image" data-upload-number="ten" data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="image"><i class="fa fa-upload"></i> 上传</a></span>
                    <span><a class="layui-btn layui-btn-normal" id="select_image" data-upload-select="image" data-upload-number="one" data-upload-mimetype="image/*"><i class="fa fa-list"></i> 选择</a></span>
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label required">轮播图</label>
            <div class="layui-input-block layuimini-upload">
                <input name="goods_carousel"  class="layui-input layui-col-xs6" lay-verify="required" value="{$row.goods_carousel|default=''}">
                <div class="layuimini-upload-btn">
                    <span><a class="layui-btn" data-upload="goods_carousel" data-upload-number="one" data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="goods_carousel"><i class="fa fa-upload"></i> 上传</a></span>
                    <span><a class="layui-btn layui-btn-normal" id="goods_carousel" data-upload-select="goods_carousel" data-upload-number="ten" data-upload-mimetype="image/*"><i class="fa fa-list"></i> 选择</a></span>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品分类</label>
            <div class="layui-input-block">
                <select name="goods_type"  lay-verify="required" data-select="{:url('store.goods/getCate')}" data-fields="id,cate_name" data-value="{$row.id|default=''}">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品价格</label>
            <div class="layui-input-block">
                <input type="number" name="goods_price"  class="layui-input" lay-verify="required" placeholder="请输入商品价格" value="0.00">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">成本价</label>
            <div class="layui-input-block">
                <input type="number" name="goods_cost_price"  class="layui-input" lay-verify="required" placeholder="请输入成本价" value="0.00">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品原价</label>
            <div class="layui-input-block">
                <input type="number" name="original_price" class="layui-input" lay-verify="required" placeholder="请输入商品原价" value="0.00">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">VIP价格</label>
            <div class="layui-input-block">
                <input type="number" name="vip_price"  class="layui-input" lay-verify="required" placeholder="请输入VIP价格" value="0.00">
            </div>
        </div>

        <!--        <div class="layui-form-item">-->
        <!--            <label class="layui-form-label">商品销量</label>-->
        <!--            <div class="layui-input-block">-->
        <!--                <input type="number" name="goods_sales_volume" class="layui-input" lay-verify="required" placeholder="请输入商品销量" value="0">-->
        <!--            </div>-->
        <!--        </div>-->
        <div class="layui-form-item">
            <label class="layui-form-label">商品虚拟销量</label>
            <div class="layui-input-block">
                <input type="text" name="goods_ficti"  class="layui-input" lay-verify="required" placeholder="请输入商品虚拟销量" value="0">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否推荐</label>
            <div class="layui-input-block">
                {foreach $getIsRecommendList as $k=>$v}
                <input type="radio" name="is_recommend" value="{$k}" title="{$v}" {in name="k" value="1"}checked=""{/in}>
                {/foreach}
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">是否热门</label>
            <div class="layui-input-block">
                {foreach $getIsHotList as $k=>$v}
                <input type="radio" name="is_hot" value="{$k}" title="{$v}" {in name="k" value="1"}checked=""{/in}>
                {/foreach}
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">是否新品</label>
            <div class="layui-input-block">
                {foreach $getIsNewList as $k=>$v}
                <input type="radio" name="is_new" value="{$k}" title="{$v}" {in name="k" value="1"}checked=""{/in}>
                {/foreach}
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">是否精品</label>
            <div class="layui-input-block">
                {foreach $getIsQualityList as $k=>$v}
                <input type="radio" name="is_quality" value="{$k}" title="{$v}" {in name="k" value="1"}checked=""{/in}>
                {/foreach}
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                {foreach $getIsStatusList as $k=>$v}
                <input type="radio" name="is_status" value="{$k}" title="{$v}" {in name="k" value="1"}checked=""{/in}>
                {/foreach}
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品关键字</label>
            <div class="layui-input-block">
                <input type="text" name="keyword"  class="layui-input" lay-verify="required" placeholder="请输入商品关键字" value="">
            </div>
        </div>
        <!--        <div class="layui-form-item">-->
        <!--            <label class="layui-form-label">活动</label>-->
        <!--            <div class="layui-input-block">-->
        <!--&lt;!&ndash;                <input type="radio" name="activity" value="{$k}" title="{$v}" {in name="k" value="1"}checked=""{/in}>&ndash;&gt;-->

        <!--                <input type="text" name="activity" class="layui-input"  value="0">-->
        <!--            </div>-->
        <!--        </div>-->
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="number" name="sort" class="layui-input" lay-verify="required" placeholder="请输入排序" value="0">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品库存</label>
            <div class="layui-input-block">
                <input type="number" name="goods_stock"  class="layui-input" lay-verify="required" placeholder="请输入商品库存" value="0">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品虚拟库存</label>
            <div class="layui-input-block">
                <input type="number" name="virtual_inventory"  class="layui-input" lay-verify="required" placeholder="请输入商品库存" value="0">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">购买商品给积分</label>
            <div class="layui-input-block">
                <input type="number" name="integral"  class="layui-input" lay-verify="required" placeholder="请输入购买商品给积分" value="0">
            </div>
        </div>

        <div class="layui-form-item">
            <!--            <label class="layui-form-label">商品详情</label>-->
            <!--            <div class="layui-input-block">-->
            <!--                <input type="text" name="goods_details" class="layui-input" lay-verify="required" placeholder="请输入商品详情" value="">-->
            <!--            </div>-->
            <div class="layui-form-item">
                <label class="layui-form-label">商品描述</label>
                <div class="layui-input-block">
                    <textarea name="goods_details"  rows="20" class="layui-textarea editor" placeholder="请输入商品描述">{$row.describe|default=''}</textarea>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">运费模板</label>
            <div class="layui-input-block">
                <select name="template_id"  lay-verify="required" data-select="{:url('freight.express/templateList')}" data-fields="id,template_name" data-value="{$row.id|default=''}">
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">选择规格</label>
            <div class="layui-input-block">
                {foreach $getIsSpecificaList as $k=>$v}
                <input type="radio" lay-filter="radio" class="specifica" name="is_specifica" value="{$k}" title="{$v}" {in name="k" value="0"}checked=""{/in}>
                {/foreach}
            </div>
        </div>
        <div class="layui-form-item">
            <table id="table" class="layui-table" lay-size="sm" >
                <thead>
                <tr>
                    <th>图片</th>
                    <th>售价</th>
                    <th>成本价</th>
                    <th>原价</th>
                    <th>库存</th>
                    <th>重量kg</th>
                    <th>体积</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>
                        <div class="layui-upload">
                            <button type="button" class="layui-btn test1" id="">上传图片</button>
                            <div class="layui-upload-list">
                                <input type="hidden" name="sku[sku_image]" value="" id="image">
                                <img class="layui-upload-img" id="sku['sku_image']">
<!--                                <p id="demoText" ></p>-->
                            </div>
                            <div style="width: 95px;">
                                <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                                    <div class="layui-progress-bar" lay-percent=""></div>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="number" placeholder="0" name="sku[sku_price]" class="layui-input">
                        </div>
                    </td>
                    <td>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="number" placeholder="0" name="sku[sku_cost_price]" class="layui-input">
                        </div>
                    </td>
                    <td>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="number" placeholder="0" name="sku[sku_original_price]" class="layui-input">
                        </div>
                    </td>
                    <td>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="number" placeholder="0" name="sku[sku_stock]" class="layui-input">
                        </div>
                    </td>
                    <td>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="number" placeholder="0" name="sku[sku_weight]" class="layui-input">
                        </div>
                    </td>
                    <td>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="number" placeholder="0" value="" name="sku[sku_volume]" class="layui-input">
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>

            <div id="double" style="display: none">
                <div class="layui-fluid">
                    <div class="layui-row layui-col-space15" id="app" v-cloak="">
                        <div class="layui-card">
                            <div class="layui-card-body clearFix">
                                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">模板名称</label>
                                        <div class="layui-input-block">
                                            <!--                                                <input type="text" style="width: 80%" v-model="rule_name" name="title"-->
                                            <!--                                                       autocomplete="off"-->
                                            <!--                                                       placeholder="请输入属性规格名" class="layui-input">-->
                                            <select name="" style="width: 80%"  lay-filter="rule"  data-select="{:url('store.goods/ruleList')}" data-fields="id,specifica_name" data-value="{$row.id|default=''}">
                                            </select>
                                        </div>
                                    </div>
                                    <div class="grid-demo grid-demo-bg1" v-for="(item,index) in items">
                                        <div class="ml110"><span>{{index}}</span><i class="layui-icon"
                                                                                    @click="deleteItem(index)">&#x1007;</i>
                                        </div>
                                        <div class="layui-form-item rules">
                                            <label class="layui-form-label"></label>
                                            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"
                                                    v-for="(val,inx) in item">
                                                {{val}}
                                                <i class="layui-icon layui-icon-close"
                                                   @click="deleteValue(item,inx)"></i>
                                            </button>
                                            <div class="rules rulesBox">
                                                <div class="rules-btn-sm">
                                                    <input type="text" v-model="item.detailValue" name=""
                                                           autocomplete="off" placeholder="请输入">
                                                </div>
                                                <button class="layui-btn layui-btn-sm" type="button"
                                                        @click="addDetail(item)">添加
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="grid-demo grid-demo-bg1 rules" style="margin-top: 24px;" v-if="newRule">
                                        <div class="layui-form-item layui-form-text rules">
                                            <label class="layui-form-label">规格：</label>
                                            <div class="rules-btn-sm">
                                                <input type="text" name="skus[title]" v-model="formDynamic.attrsName"
                                                       autocomplete="off" placeholder="请输入规格">
                                            </div>
                                        </div>
                                        <div class="layui-form-item layui-form-text rules">
                                            <label class="layui-form-label">规格值：</label>
                                            <div class="rules-btn-sm">
                                                <input type="text" name="skus[title]" v-model="formDynamic.attrsVal"
                                                       autocomplete="off" placeholder="请输入规格值">
                                            </div>
                                        </div>
                                        <button class="layui-btn layui-btn-sm ml40" type="button"
                                                @click="createAttrName">添加
                                        </button>
                                        <button class="layui-btn layui-btn-sm ml10" type="button"
                                                @click="newRule = false">取消
                                        </button>
                                    </div>
<!--                                    <div class="grid-demo grid-demo-bg1" style="margin-top: 20px" v-if="newRule == false">-->
<!--                                        <div class="layui-form-item">-->
<!--                                            <label class="layui-form-label"></label>-->
<!--                                            <button class="layui-btn layui-btn-sm" type="button" @click="newRule = true">添加新规格-->
<!--                                            </button>-->
<!--                                        </div>-->
<!--                                    </div>-->
                                </div>
                            </div>
                            <div id="sku">
                                <table class="layui-table" lay-size="sm" >
                                    <thead>
                                    <tr>
                                        <th v-for="(item,index) in attr">{{item}}</th>
                                        <th>图片</th>
                                        <th>售价</th>
                                        <th>成本价</th>
                                        <th>原价</th>
                                        <th>库存</th>
                                        <th>重量kg</th>
                                        <th>体积</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tr v-for="(item,index) in skus">
                                        <td v-for="(value,key) in attr">
                                            <div class="layui-input-inline" style="width: 100px;">
                                                <input type="text" placeholder="0" disabled :value="item[key]['value']" :name="skuGoods[index][value]" class="layui-input">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="layui-upload">
                                                <button type="button" class="layui-btn" id="upload">上传图片</button>
                                                <div class="layui-upload-list">
                                                    <input type="hidden" :name="skuGoods[index]['sku_image']" :id="skuGoods[index]['sku_image']">
                                                    <img class="layui-upload-img images" :id="item['image']">
                                                    <p id="demoText[index]" ></p>
                                                </div>
                                                <div style="width: 95px;">
                                                    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                                                        <div class="layui-progress-bar" lay-percent=""></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="layui-input-inline" style="width: 100px;">
                                                <input type="number" placeholder="0" :value="item['sku_price']" :name="skuGoods[index]['sku_price']" class="layui-input">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="layui-input-inline" style="width: 100px;">
                                                <input type="number" placeholder="0" :value="item['sku_cost_price']" :name="skuGoods[index]['sku_cost_price']" class="layui-input">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="layui-input-inline" style="width: 100px;">
                                                <input type="number" placeholder="0"  :value="item['sku_original_price']" :name="skuGoods[index]['sku_original_price']" class="layui-input">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="layui-input-inline" style="width: 100px;">
                                                <input type="number" placeholder="0"  :value="item['sku_stock']" :name="skuGoods[index]['sku_stock']" class="layui-input">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="layui-input-inline" style="width: 100px;">
                                                <input type="number" placeholder="0" :value="item['sku_weight']" :name="skuGoods[index]['sku_weight']" class="layui-input">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="layui-input-inline" style="width: 100px;">
                                                <input type="number" placeholder="0"  :value="item['sku_volume']" :name="skuGoods[index]['sku_volume']" class="layui-input">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="layui-input-inline" style="width: 100px;">
                                                <button type="button" class="layui-btn layui-btn-danger skuDelete">删除</button>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    <div>

                    </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="hr-line"></div>
        <div class="layui-form-item text-center">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="demo1">确认</button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
        </div>
        <input type="hidden" id="attr" :value="attr" name="attr">

    </form>
</div>

<script>
    layui.use(['jquery','form','upload', 'element', 'layer'],function () {
        var $ = layui.jquery;
        var form = layui.form,
            upload = layui.upload,
            element = layui.element,
            layer = layui.layer;

        $(".skuDelete").click(function () {
            $(this).parents('tr').remove();
        })

        // 笛卡尔积算法
        function descartes(  list )
        {
            //parent上一级索引;count指针计数
            var point  = {};

            var result = [];
            var pIndex = null;
            var tempCount = 0;
            var temp   = [];

            //根据参数列生成指针对象
            for(var index in list)
            {
                if(typeof list[index] == 'object')
                {
                    point[index] = {'parent':pIndex,'count':0}
                    pIndex = index;
                }
            }

            //单维度数据结构直接返回
            if(pIndex == null)
            {
                return list;
            }

            //动态生成笛卡尔积
            while(true)
            {
                let i = 0;
                for(var index in list)
                {
                    tempCount = point[index]['count'];
                    temp[i] = [];
                    temp[i]['key'] = index;
                    temp[i]['value'] = list[index][tempCount];
                    i++;
                }
                //压入结果数组
                //函数第一次计算时将数组的前两个元素进行”组合“
                result.push(temp);
                temp = [];
                //检查指针最大值问题
                while(true)
                {
                    if(point[index]['count']+1 >= list[index].length)
                    {
                        point[index]['count'] = 0;
                        pIndex = point[index]['parent'];
                        if(pIndex == null)
                        {
                            return result;
                        }

                        //赋值parent进行再次检查
                        index = pIndex;
                    }
                    else
                    {
                        point[index]['count']++;
                        break;
                    }
                }
            }
        }

        function skuUpdate(skus)
        {
            let sku = vm.sku;
            // let skuGoods =  vm.skuGoods;
            skuGoods = [];
            let attr = vm.attr;
            $("#attr").val(attr)
            for (let index in skus) {
                skuGoods[index] = [];
                for (let key in attr) {
                    skuGoods[index][attr[key]] = "skuGoods["+index+"]["+attr[key]+"]";
                }
                skuGoods[index]['images'] = "skuGoods["+index+"][images]";
                skuGoods[index]['sku_price'] =  "skuGoods["+index+"][sku_price]";
                skuGoods[index]['sku_cost_price'] =  "skuGoods["+index+"][sku_cost_price]";
                skuGoods[index]['sku_original_price'] =  "skuGoods["+index+"][sku_original_price]";
                skuGoods[index]['sku_stock'] =  "skuGoods["+index+"][sku_stock]";
                skuGoods[index]['sku_weight'] =  "skuGoods["+index+"][sku_weight]";
                skuGoods[index]['sku_volume'] =  "skuGoods["+index+"][sku_volume]";
                skus[index]['images'] = sku['image'];
                skus[index]['sku_price'] = sku['sku_price'];
                skus[index]['sku_cost_price'] = sku['sku_cost_price'];
                skus[index]['sku_original_price'] = sku['sku_original_price'];
                skus[index]['sku_stock'] = sku['sku_stock'];
                skus[index]['sku_weight'] = sku['sku_weight'];
                skus[index]['sku_volume'] = sku['sku_volume'];
            }
            vm.skus = skus;
            vm.skuGoods = skuGoods;
        }

        form.on('select(rule)',function (res) {
            $.ajax({
                url:"{:url('ruleList')}",
                data:{id:res.value},
                dataType:"json",
                type:"get",
                success:function (res) {
                    vm.items = res.data[0].specifica_value;
                    vm.attr = [];
                    for (let attr in vm.items) {
                        vm.attr.push(attr);
                    }
                    skus = descartes(vm.items);
                    skuUpdate(skus);
                }
            })
        })
        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: "{:url('upFile')}" //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            ,done: function(res){
                console.log(res.url)
                $("#image").val(res.url)
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                //……
                $('#demoText').html(''); //置空上传失败的状态
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            //进度条
            ,progress: function(n, elem, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });

        form.on('radio(radio)',function (data) {
            // console.log(data.value)
            if (data.value == '0'){
                $("#table").show();
                $('#double').hide()
            }else {
                $("#table").hide();
                $('#double').show()
            }
        })


        var id = 0;
        var vm = new Vue({
            el: '#app',
            data: {
                newRule: false,
                rule_name: '',
                items: [],
                item:[],
                // 规格数据
                formDynamic: {
                    attrsName: '',
                    attrsVal: ''
                },
                attr: [],   //规格名
                skus: [],   //sku集合
                skuGoods: [],
            },
            created() {
                this.skuLoad();
            },
            updated() {
                console.log(111);
                form.render();
            },
            methods: {
                skuLoad() {
                    let sku = [];
                    sku['image'] = 0;
                    sku['sku_price'] = 0;
                    sku['sku_cost_price'] = 0;
                    sku['sku_original_price'] = 0;
                    sku['sku_stock'] = 0;
                    sku['sku_weight'] = 0;
                    sku['sku_volume'] = 0;
                    this.sku = sku;
                },
                handleClick() {
                    // 先清空数据，保证连续点击按钮，数据不会重复
                    this.skuArray = []
                    this.skuList = []
                    // 将选中的规格组合成一个大数组 [[1, 2], [a, b]...]
                    this.checkList.forEach(element => {
                        element.list.length > 0 ? this.skuArray.push(element.list) : ''
                    })
                    // 勾选了规格，才调用方法
                    if (this.skuArray.length > 0) {
                        this.getSkuData([], 0, this.skuArray)
                    } else {
                        this.$message.error('请先勾选规格')
                    }
                },
                // 递归获取每条SKU数据
                getSkuData(skuArr = [], i, list) {
                    for (let j = 0; j < list[i].length; j++) {
                        if (i < list.length - 1) {
                            skuArr[i] = list[i][j]
                            this.getSkuData(skuArr, i + 1, list) // 递归循环
                        } else {
                            this.skuList.push([...skuArr, list[i][j]]) // 扩展运算符，连接两个数组
                        }
                    }
                },
                /**
                 * 给某个属性添加属性值
                 * @param item
                 * */
                addDetail: function (item) {
                    // console.log(this.items)
                    if (!item.detailValue) return false;
                    if (item.find(function (val) {
                        if (item.detailValue == val) {
                            return true;
                        }
                    })) {
                        return this.showMsg('添加的属性值重复');
                    }
                    item.push(item.detailValue);
                    // console.log(vm.items);
                    skus = descartes(vm.items);
                    skuUpdate(skus);
                    item.detailValue = '';
                },
                /**
                 * 删除某条属性
                 * @param index
                 * */
                deleteItem: function (index) {
                    this.items.splice(index, 1);
                    skus = descartes(vm.items);
                    skuUpdate(skus);
                },
                /**
                 * 提示
                 * */
                showMsg: function (msg, success) {
                    layui.use(['layer'], function () {
                        layui.layer.msg(msg, success);
                    });
                },
                /**
                 * 创建属性
                 * */
                createAttrName: function () {
                    if (this.formDynamic.attrsName && this.formDynamic.attrsVal) {
                        console.log(this.items)
                        if (this.value.find(function (val) {
                            if (val.value == this.formDynamic.attrsName) {
                                return true;
                            }
                        }.bind(this))) {
                            return this.showMsg('添加的属性重复');
                        }
                        this.items.push({
                            value: this.formDynamic.attrsName,
                            detailValue: '',
                            attrHidden: false,
                            detail: [this.formDynamic.attrsVal]
                        });
                        this.formDynamic.attrsName = '';
                        this.formDynamic.attrsVal = '';
                        this.newRule = false;
                    } else {
                        return this.showMsg('请添加完整的规格!');
                    }
                },
                /**
                 * 删除某个属性值
                 * @param item 父级循环集合
                 * @param inx 子集index
                 * */
                deleteValue: function (item, inx) {
                    if (item.length > 1) {
                        item.splice(inx, 1);
                    } else {
                        return this.showMsg('请设置至少一个属性');
                    }
                    skus = descartes(vm.items);
                    skuUpdate(skus);
                },
                handleSubmit: function () {
                    var that = this;
                    if (!this.rule_name) {
                        return this.showMsg('请输入规则名称');
                    }
                    console.log(that.formDynamic)
                    this.requestPost("{:url('create')}" , {
                        specifica_name: that.rule_name,
                        specifica_value: that.items
                    }).then(function (res) {
                        return that.showMsg(res.msg, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                            if (parent.successFun) {
                                parent.successFun();
                            } else {
                                parent.$(".J_iframe:visible")[0].contentWindow.location.reload();
                            }
                        });
                    }).catch(function (res) {
                        return that.showMsg(res.msg);
                    });
                },
                requestPost: function (url, data) {
                    return new Promise(function (resolve, reject) {
                        axios.post(url, data).then(function (res) {
                            if (res.status == 200 && res.data.code == 200) {
                                resolve(res.data)
                            } else {
                                reject(res.data);
                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                parent.layer.close(index); //再执行关闭
                                parent.location.reload();
                            }
                        }).catch(function (err) {
                            reject({msg: err})
                        });
                    })
                }
            },
        });

    });

    function cartesianProductOf() {
        return 111;
        return Array.prototype.reduce.call(arguments, function(a, b) {
            var ret = [];
            a.forEach(function(a) {
                b.forEach(function(b) {
                    ret.push(a.concat([b]));
                });
            });
            return ret;
        }, [[]]);
    }
</script>










